<template>
  <div>
    <div class="reg_box1">
      <img src="@/assets/img/bg_1@2x.png" alt=""/>
      <div class="title">待支付</div>
      <!-- <div class="time">请在29分45秒内完成支付，超时将自动取消</div> -->
    </div>
    <div class="reg_box2">
      <div class="mine_patient">
        <div class="mine_patient_1">
          <div class="mine_patient_1_left">

            就诊人

          </div>
          <div class="mine_patient_1_right">
            <!-- <img src="@/assets/img/right.png" alt=""> -->
            {{ detail.userName }}
          </div>
        </div>
        <div class="mine_patient_2" id="barcode">
          <barcode :value="detail.hospPatientId" format="CODE128" background="#F4F8FC" width="3" height="65">
            条形码加载失败!
          </barcode>
        </div>
      </div>
      <div class="title_box"><span class="dot"></span>就诊信息</div>

      <div class="info_box">
        <div class="left">就诊医生：</div>
        <div class="right">{{ detail.orderDetail.doctorName }}</div>
      </div>
      <div class="info_box">
        <div class="left">就诊科室：</div>
        <div class="right">{{ detail.orderDetail.deptName }}</div>
      </div>
      <!--      <div class="info_box">-->
      <!--        <div class="left">就诊时间：</div>-->
      <!--        <div class="right">{{ detail.orderDetail.receiptDate }}</div>-->
      <!--      </div>-->
      <div class="info_box">
        <div class="left">开方时间：</div>
        <div class="right">{{ detail.operreceipt }}</div>
      </div>
      <div class="info_box">
        <div class="left">挂号类型：</div>
        <div class="right">{{ detail.medicalInsurannceType }}</div>
      </div>
      <div class="info_box">
        <div class="left">发 票 ID ：</div>
        <div class="right">尚未支付</div>
      </div>
      <div class="title_box"><span class="dot"></span>注意事项</div>
      <div class="info_box">
        <div v-if="detail.memo" v-html="detail.memo">

        </div>
        <div v-else>
          无
        </div>
        <!-- {{detail.memo?detail.memo:'无'}} -->
      </div>
      <div class="title_box"><span class="dot"></span>项目信息</div>
      <table class="record-info-table table_box">
        <thead>
        <th>项目名称</th>
        <th>规格</th>
        <th>数量</th>
        <th>单价</th>

        <th>总额</th>

        </thead>
        <tbody>
        <template v-for="(presitem, index) in detail.payDetailList">
          <tr style="background-color: rgb(238, 247, 255)">
            <td>{{ presitem.detailName }}</td>
            <td>{{ presitem.detailSpec }} {{ presitem.detailType }}/{{ presitem.detailUnit }}</td>
            <td>{{ presitem.detailCount }}</td>
            <td>{{ presitem.detailPrice / 100 }}</td>
            <td>{{ presitem.detailAmout / 100 }}</td>
          </tr>
          <!-- <tr>
          <td colspan="5" style="text-align: left; padding-left: 0.5rem">
            用法用量：{{ presitem.drugUseMemo }}
          </td>
        </tr> -->
        </template>

        <tr>
          <td colspan="5" style="text-align: right; padding-right: 0.5rem; font-size: 1rem">
            合计：
            <span style="color: red">￥{{ detail.payTotalFee / 100 }}</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div style="height: 20px"></div>
    <!-- <div class="btn_box">
      <div class="btn_box_1">
        合计: <span style="color: red">¥{{ detail.payTotalFee / 100 }}</span>
      </div>
      <div class="btn_box_2" @click="goPay">立即支付</div>
    </div> -->
  </div>
</template>
<script>
import {cancelReg, getPayDetail, payCreate} from "@/api/api";
import {removeToken, getWxUserinfoCookies, removeWxUserinfoCookies} from "@/api/auth";

export default {
  data() {
    return {
      info: {},
      detail: {},
      userInfo: {},
      prescdetail: {
        prescDrugList: [],
      },
    };
  },
  created() {
    this.info = this.$route.query;
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }
    this.getPayDetail();
  },
  methods: {
    getPayDetail() {
      var data = {
        hospSequence: this.info.hospSequence,
        hosId: "1111",
        hospPatientId: "",
        clinicCode: this.info.clinicCode,
      };
      getPayDetail(data).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;

          var reg = new RegExp("\n", "g")
          this.detail.memo = this.detail.memo.replace(reg, "<br>")


        }
      });
    },
    goPay() {
      //
      this.payCreate();
    },
    getLocalOpenId() {
      try {
        var user = JSON.parse(getWxUserinfoCookies());
        if (user && user.openid.trim().length > 0) {
          return user.openid;
        } else {
          console.log("getWxUserinfoCookies 未获取到微信openid");
        }
      } catch (err) {
        console.log(err)
        var openId = window.localStorage.getItem("openId");
        return openId;
      }
    },
    payCreate() {
      const that = this;
      payCreate({
        orderType: "2",
        orderId: this.info.orderId,
        openId: this.getLocalOpenId(),
      }).then((res) => {
        if (res.code == 200) {
          // 调起微信支付
          that.wxPay(res.data);
        } else {
          alert(res.message);
          if (res.code == 1355) {
            that.$router.push({
              name: "outpatient_payment",
            });
          }
        }
      });
    },
    // 发起微信支付
    wxPay(data) {
      const that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: data.appId, //公众号名称，由商户传入
          timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: data.nonceStr, //随机串
          package: data.package,
          signType: data.signType, //微信签名方式：
          paySign: data.paySign, //微信签名
        },
        function (response) {
          //TODO 应该再进行一次查单验证来保证支付成功
          if (response.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回get_brand_wcpay_request:ok，但并不保证它绝对可靠。
            // window.location.href =
            setTimeout(() => {
              that.$router.push('/outpatient_payment');
            }, 1000);
          } else {
            that.$vux.toast.show("支付失败");
            that.$router.push('/outpatient_payment');
          }
        }
      );
    },
    CancelRegLock() {
      const that = this;
      const data = {
        hosId: "",
        orderId: this.info.orderId,
        hospPatientId: this.userInfo.hospPatientId,
        cancelRemark: "用户主动取消",
      };
      that.$vux.confirm.show({
        // 组件除show外的属性
        title: "提示",
        content: "是否确认取消挂号?",
        onCancel() {
        },
        onConfirm() {
          cancelReg(data).then((res) => {
            if (res.code == 200) {
              that.$vux.toast.show("取消挂号成功");
              setTimeout(() => {
                that.$router.go(-1);
              }, 1000);
            } else {
              that.$vux.toast.show(res.message);
            }
          });
        },
      });
    },
  },
  filters: {
    timefun(time) {
      if (time) {
        var newTime = time.slice(0, 2) + ":" + time.slice(2);
        newTime =
          newTime.slice(0, newTime.length - 2) +
          ":" +
          newTime.slice(newTime.length - 2);
        return newTime;
      }
    },
  },
};
</script>
<style scoped>
.reg_box1 {
  width: 100%;
  height: 142px;
  position: relative;
  color: #fff;
}

.reg_box1 > div {
  position: relative;
  margin-left: 16px;
}

.reg_box1 .title {
  text-align: left;
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  line-height: 42px;
}

.reg_box1 .time {
  font-size: 14px;
  /* font-weight: bold; */
  color: #ffffff;
  line-height: 42px;
}

.reg_box1 img {
  width: 100%;
  height: 100%;
  position: absolute;
}

.reg_box2 {
  width: calc(100% - 64px);
  min-height: 70vh;
  padding: 16px;
  margin: 0px auto;
  position: relative;
  top: -4.6875rem;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(7, 62, 145, 0.24);
  border-radius: 5px;
}

.reg_box2 .title_box {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #131a2a;
  line-height: 42px;
}

.reg_box2 .title_box .dot {
  width: 3px;
  height: 15px;
  background: #448eff;
  border-radius: 2px;
  margin-right: 12px;
}

.reg_box2 .info_box {
  display: flex;
  line-height: 26px;
  margin: 5px 0;
}

.reg_box2 .info_box .left {
  /* width: 70px; */
  color: #a4adbe;
  font-size: 14px;
  text-align-last: justify;
}

.reg_box2 .info_box .right {
  width: calc(100% - 70px);
  word-wrap: break-word;
  word-break: normal;
  font-size: 15px;
}

.record-info-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(214, 223, 241, 1);
  font-size: 0.875rem;
}

/* .record-info-table thead {
  background-color: rgba(121, 190, 255, 0.8);
  font-size: 0.9375rem;
}

.record-info-table th {

  font-weight: normal;
  color: #ffffff;
  padding: 0.3125rem 0;
  border: 1px solid rgba(214, 223, 241, 1);
}

.record-info-table td {
  text-align: center;

  padding: 0.3125rem 0;
  word-wrap: break-word;
  border: 1px solid rgba(214, 223, 241, 1);
} */
.table_box td,
th {
  border: 1px solid #d6dff1;
  font-weight: normal;
  text-align: center;
  padding: 0.3125rem 0.375rem;
}

.table_box th {
  height: 2.1875rem;
}

.table_box thead {
  background-color: #79beff;
  color: #fff;
}

.btn_box {
  height: 55px;
  width: 100%;

  display: flex;
  position: fixed;
  bottom: 0;

  background: #ffffff;
  box-shadow: 0px 0px 13px 0px rgba(181, 189, 197, 0.28);
}

.btn_box > div {
  width: 50%;
  height: 100%;
  line-height: 55px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}

.btn_box .btn_box_1 {
  color: #448eff;
  width: calc(100% - 9.75rem);
  font-weight: normal;
  color: #000;
  text-align: left;
  padding-left: 1rem;
}

.btn_box .btn_box_2 {
  width: 8.75rem;
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  color: #fff;
}
</style>
<style lang="less">
.mine_patient {
  position: relative;
  height: 8.125rem;
  // background: #FFFFFF;
  // box-shadow: 0.00rem 0.19rem 0.63rem 0.00rem rgba(174, 206, 254, 0.3200);

  background: #F4F8FC;
  border-radius: 0.63rem;
  // margin: 0.75rem 1rem;
  padding: 0.75rem;

  &_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &_left {
      display: flex;
      align-items: center;

      > span {
        width: 2.06rem;
        height: 1.06rem;
        background-color: rgba(68, 142, 255, 0.15);
        border-radius: 0.19rem;
        font-size: 0.75rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #448EFF;
        display: inline-block;
        text-align: center;
        margin-left: 0.75rem;
      }

      > img {
        width: 1.4375rem;
        height: 1.4375rem;
        margin-right: 0.75rem;
      }
    }

    &_right {
      color: #131A2A;
      font-weight: bold;

      > img {
        width: 0.5rem;
        height: 0.8125rem;
      }
    }
  }

  &_2 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
